<script setup lang="ts">
import { h } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { AddAliasProps } from "@/views/home/components/addAlias/types.ts";
import { invoke } from "@tauri-apps/api/tauri";
import { notification } from "ant-design-vue";

defineOptions({
	name: "HomeAddAliasView",
});

const props = withDefaults(defineProps<AddAliasProps>(), {
	index: () => "",
	close: () => false,
});

const index = toRef(props, "index");
const close = toRef(props, "close");
const open = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const alias_value = ref<string>("");
const emits = defineEmits(["addAlias"]);
const handleOk = () => {
	confirmLoading.value = true;
	invoke("action_add_aliases", { index: index.value, alias: alias_value.value }).then((data: any) => {
		open.value = false;
		confirmLoading.value = false;
		alias_value.value = "";
		notification.info({
			message: "添加索引结果",
			description: JSON.stringify(data, null, "\t"),
			placement: "bottomRight",
		});
		emits("addAlias", index.value);
	});
};

function handleAddAlias() {
	open.value = true;
}
</script>

<template>
	<div class="home-add-alias-view">
		<a-button type="dashed" size="small" :icon="h(PlusOutlined)" @click="handleAddAlias" :disabled="close" />
		<a-modal v-model:open="open" title="添加别名" centered :confirm-loading="confirmLoading" @ok="handleOk">
			<div class="w-full pt-5 pb-5">
				<a-textarea v-model:value="alias_value" :placeholder="index" :auto-size="{ minRows: 2, maxRows: 5 }" allow-clear :bordered="false" />
			</div>
		</a-modal>
	</div>
</template>

<style scoped lang="scss"></style>
